<template>
  <div class="imgUpload">
    <!-- 上传的组件 -->
    <el-upload
      v-if="!imgUrl"
      action="#"
      list-type="picture-card"
      :http-request="httpRequest"
      :before-upload="beforeUpload"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <!-- 显示的默认图片 -->
    <div class="box" v-else>
      <img :src="imgUrl" alt="" class="myimg" @click="previewImg" v-myImg="defaultImg"/>
      <i class="el-icon-close" @click="closeImg"></i>
    </div>
    <!-- 图片预览的对话框 -->
    <el-dialog title="预览图片" :visible.sync="showDialog" top="10vh">
      <div class="imgBox">
        <img :src="imgUrl" alt="" />
      </div>
    </el-dialog>
    <!-- 添加进度条 -->
    <el-progress
      :percentage="percentage"
      :show-text="false"
      v-if="showProgress"
      class="myprogress"
    ></el-progress>
  </div>
</template>

<script>
//导入上传图片的插件
import COS from 'cos-js-sdk-v5'
export default {
  name: 'imgUpload',
  // imgUrl:使用上传组件时默认显示的图片
  props: ['imgUrl'],
  data () {
    return {
      //控制预览对话框的显示与隐藏
      showDialog: false,
      //cos对象参数
      cosObj: '',
      //控制进度条的显示与隐藏
      showProgress: false,
      //进度条的值  0~100
      percentage: 0,
      //当头像加载失败时就需要显示默认图片
      defaultImg:require('@/assets/common/01.png')
    }
  },
  methods: {
    //自定义上传规则
    httpRequest (file) {
      //开启进度条
      this.showProgress = true
      const imgFile = file.file
      this.cosObj.putObject(
        {
          Bucket: 'liugg-1307224115' /* 必须 */,
          Region: 'ap-nanjing' /* 存储桶所在地域，必须字段 */,
          Key: imgFile.name /* 必须 */,
          StorageClass: 'STANDARD',
          Body: imgFile, // 上传文件对象
          onProgress: progressData => {
            // progressData: 上传过程中的实时进度对象
            // console.log(JSON.stringify(progressData))
            //设置进度条的进度
            this.percentage = progressData.percent * 1000
            //判断，如果进度条的percent为1时，就需要隐藏进度条
            if (progressData.percent == 1) {
              setTimeout(() => {
                this.showProgress = false
              }, 1000)
            }
          }
        },
        (err, data) => {
          // data:上传成功后的返回值
          // err:上传出错的错误信息
          //得到返回的路径
          const imgpath = 'http://' + data.Location
          //将路径保存到  imgUrl 中
          this.$emit('update:imgUrl', imgpath)
        }
      )
    },
    //上传图片之前会执行的逻辑代码
    beforeUpload (file) {
      //在上传图片之前，需要先对图片的格式、图片的大小进行判断
      //图片大小需在2M以内
      const less2M = file.size < 2 * 1024 * 1024
      //图片的后缀格式必须为jepg/jpg/Png格式
      const imgType =
        file.type === 'image/jpeg' ||
        file.type === 'image/jpeg' ||
        file.type === 'image/png'
      //进行判断，如果不符合要求就直接进行错误提示，符合则进行下一步
      if (!less2M) {
        this.$message.error('图片大小不符合要求，请重新上传2M以内')
      }
      if (!imgType) {
        this.$message.error('图片格式有误')
      }
      return less2M && imgType
    },
    //点击叉叉关闭默认图片
    closeImg () {
      this.$emit('update:imgUrl', '')
    },
    //点击图片弹窗预览框
    previewImg () {
      this.showDialog = true
    }
  },
  created () {
    //初始化cos对象参数
    this.cosObj = new COS({
      SecretId: 'AKIDGLAj24qLZVAYicGeka9QQAdqGZeV7Uea', // 身份识别 ID
      SecretKey: 'kGYjgOs78vVqwnPoyuc6LL6dv0rUs2xd' // 身份密钥
    })
  }
}
</script>

<style lang="scss" scoped>
.imgUpload {
  .box {
    width: 150px;
    height: 150px;
    position: relative;
    .myimg {
      width: 150px;
      height: 150px;
    }
    i {
      position: absolute;
      top: 0px;
      right: 0px;
      color: red;
      padding: 4px;
      background-color: pink;
      cursor: pointer;
      z-index: 999;
    }
  }
  .imgBox {
    text-align: center;
  }
  .myprogress {
    margin-top: 5px;
    width: 150px;
  }
}
</style>
